<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="/common/header::commonHead(${title})">
</head>
<body>
<link rel="stylesheet" type="text/css" th:href="@{css/order/style.css}">
<link rel="stylesheet" type="text/css" th:href="@{css/order/css.css}" />
<script type="text/javascript">
    $(function() {
        var region = $("#region");
        var address = $("#address");
        var number_this = $("#number_this");
        var name = $("#name_");
        var phone = $("#phone");
        $("#sub_setID").click(function() {
            var input_out = $(".input_style");
            for (var i = 0; i <= input_out.length; i++) {
                if ($(input_out[i]).val() == "") {
                    $(input_out[i]).css("border", "1px solid red");

                    return false;
                } else {
                    $(input_out[i]).css("border", "1px solid #cccccc");
                }
            }
        });
        var span_momey = $(".span_momey");
        var b = 0;
        for (var i = 0; i < span_momey.length; i++) {
            b += parseFloat($(span_momey[i]).html());
        }
        var out_momey = $(".out_momey");
        out_momey.html(b);
        $(".shade_content").hide();
        $(".shade").hide();
        $('.nav_mini ul li').hover(function() {
            $(this).find('.two_nav').show(100);
        }, function() {
            $(this).find('.two_nav').hide(100);
        })
        $('.left_nav').hover(function() {
            $(this).find('.nav_mini').show(100);
        }, function() {
            $(this).find('.nav_mini').hide(100);
        })
        $('#jia').click(function() {
            $('input[name=num]').val(parseInt($('input[name=num]').val()) + 1);
        })
        $('#jian').click(function() {
            $('input[name=num]').val(parseInt($('input[name=num]').val()) - 1);
        })
        $('.Caddress .add_mi').click(function() {
            $(this).css('background', 'url("images/mail_1.jpg") no-repeat').siblings('.add_mi').css('background', 'url("images/mail.jpg") no-repeat')
        })
    })
    var x = Array();

    function func(a, b) {
        x[b] = a.html();
        alert(x)
        a.css('border', '2px solid #f00').siblings('.min_mx').css('border', '2px solid #ccc');
    }

    function onclick_close() {
        var shade_content = $(".shade_content");
        var shade = $(".shade");
        if (confirm("确认关闭么！此操作不可恢复")) {
            shade_content.hide();
            shade.hide();
        }
    }

    function onclick_open() {
        $(".shade_content").show();
        $(".shade").show();
        var input_out = $(".input_style");
        for (var i = 0; i <= input_out.length; i++) {
            if ($(input_out[i]).val() != "") {
                $(input_out[i]).val("");
            }
        }
    }

    function onclick_remove(r) {
        if (confirm("确认删除么！此操作不可恢复")) {
            var out_momey = $(".out_momey");
            var input_val = $(r).parent().prev().children().eq(1).val();
            var span_html = $(r).parent().prev().prev().children().html();
            var out_add = parseFloat(input_val).toFixed(2) * parseFloat(span_html).toFixed(2);
            var reduce = parseFloat(out_momey.html()).toFixed(2)- parseFloat(out_add).toFixed(2);
            console.log(parseFloat(reduce).toFixed(2));
            out_momey.text(parseFloat(reduce).toFixed(2))
            $(r).parent().parent().remove();
        }
    }

    function onclick_btnAdd(a) {
        var out_momey = $(".out_momey");
        var input_ = $(a).prev();
        var input_val = $(a).prev().val();
        var input_add = parseInt(input_val) + 1;
        input_.val(input_add);
        var btn_momey = parseFloat($(a).parent().prev().children().html());
        var out_momey_float = parseFloat(out_momey.html()) + btn_momey;
        out_momey.text(out_momey_float.toFixed(2));
    }

    function onclick_reduce(b) {
        var out_momey = $(".out_momey");
        var input_ = $(b).next();
        var input_val = $(b).next().val();
        if (input_val <= 1) {
            alert("商品个数不能小于1！")
        } else {
            var input_add = parseInt(input_val) - 1;
            input_.val(input_add);
            var btn_momey = parseFloat($(b).parent().prev().children().html());
            var out_momey_float = parseFloat(out_momey.html()) - btn_momey;
            out_momey.text(out_momey_float.toFixed(2));
        }
    }
</script>
<div class="agileits-modal modal fade" id="myModal88" tabindex="-1" role="dialog" aria-labelledby="myModal88"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel"><i class="fa fa-map-marker" aria-hidden="true"></i> Location
                </h4>
            </div>
            <div class="modal-body modal-body-sub">
                <h5>Select your delivery city & location </h5>

                <input type="text" name="Name" placeholder="Enter your area / Landmark / Pincode" required="">
                <button type="button" class="close2" data-dismiss="modal" aria-hidden="true">Skip & Explore</button>
            </div>
        </div>
    </div>
</div>
<div th:replace="/common/nav::nav">
</div>

<!-- 内容开始处 -->
<div class="Caddress">
    <div class="open_new">
        <button class="open_btn" onclick="javascript:onclick_open();">使用新地址</button>
    </div>
    <div class="add_mi">
        <table class="table table-striped">
            <tr>
                <td>用户名</td>
                <td>收货人姓名</td>
                <td>详细地址</td>
                <td>联系电话</td>
            </tr>
            <tr>
                <td id="username" th:text="${address.username}"></td>
                <td  id="receive_name"  th:text="${address.receiveName}"></td>
                <td id="user_address"   th:text="${address.detailAddress}"></td>
                <td id="user_phone"   th:text="${address.receivePhone}"></td>
            </tr>
        </table>
    </div>

</div>

<!--
    作者：z@163.com
    时间：2016-03-04
    描述：商品内容
-->
<div class="shopping_content">
    <div class="shopping_table">
        <table border="1" bordercolor="#cccccc" cellspacing="0" cellpadding="0" style="width: 100%; text-align: center;">
            <tr>
                <th>商品图片</th>
                <th>商品名称</th>
                <th>商品属性</th>
                <th>商品价格</th>
                <th>商品数量</th>
                <th>商品操作</th>
            </tr>
            <tr>
                <td>
                    <a><img src="images/2f1.jpg" /></a>
                </td>
                <td><span>小消息下</span></td>
                <td>
                    <div class="">
                        <span id="">颜色</span>：<span>白色</span>
                    </div>
                    <div class="">
                        <span id="">尺码</span>：<span>L</span>
                    </div>
                </td>
                <td>
                    <span class="span_momey">11.10</span>
                </td>
                <td>
                    <button class="btn_reduce" onclick="javascript:onclick_reduce(this);">-</button>
                    <input class="momey_input" type="" name="" id="" value="1" disabled="disabled" />
                    <button class="btn_add" onclick="javascript:onclick_btnAdd(this);">+</button>
                </td>
                <td>
                    <button class="btn_r" onclick="javascript:onclick_remove(this);">删除</button>
                </td>
            </tr>

        </table>
        <div class="" style="width: 100%; text-align: right; margin-top: 10px;">
            <div class="div_outMumey" style="float: left;">
                总价：<span class="out_momey">11</span>
            </div>
            <button class="btn_closing">结算</button>
        </div>
    </div>
</div>

<!--
    作者：z@163.com
    时间：2016-03-01
    描述：shade 遮罩层
-->
<div class="shade">
</div>
<!--
    作者：z@163.com
    时间：2016-03-02
    描述：shade_content
-->
<div class="shade_content">
    <div class="col-xs-12 shade_colse">
        <button onclick="javascript:onclick_close();">x</button>
    </div>
    <div class="nav shade_content_div">
        <div class="col-xs-12 shade_title">
            更改收货地址
        </div>
        <div class="col-xs-12 shade_from">
            <form th:action="@{/addAddress}" th:object="${addressForm}" method="post">
                <div class="col-xs-12">
                    <span class="span_style" id="">地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;区</span>
                    <input class="input_style" type="" name="region" id="region" th:field="${addressForm.region}" value="" placeholder="&nbsp;&nbsp;请输入您的所在地区" />
                </div>
                <div class="col-xs-12">
                    <span class="span_style" id="">详细地址</span>
                    <input class="input_style" type="" name="detailAddress" id="address"  th:field="${addressForm.detailAddress}" value="" placeholder="&nbsp;&nbsp;请输入您的详细地址" />
                </div>
                <div class="col-xs-12">
                    <span class="span_style" id="">邮政编号</span>
                    <input class="input_style" type="" name="zipCode" id="number_this" th:field="${addressForm.zipCode}"  value="" placeholder="&nbsp;&nbsp;请输入您的邮政编号" />
                </div>
                <div class="col-xs-12">
                    <span class="span_style"  id="">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名</span>
                    <input class="input_style" type="" name="receiveName" id="name_" th:field="${addressForm.receiveName}"  value="" placeholder="&nbsp;&nbsp;请输入您的姓名" />
                </div>
                <div class="col-xs-12">
                    <span class="span_style" id="">手机号码</span>
                    <input class="input_style" type="" name="receivePhone" id="phone" th:field="${addressForm.receivePhone}"  value="" placeholder="&nbsp;&nbsp;请输入您的手机号码" />
                </div>
                <div class="col-xs-12">
                    <input class="btn_remove" type="button" id="" onclick="javascript:onclick_close();" value="取消" />
                    <input type="submit" class="sub_set" id="sub_setID" value="提交" />
                </div>
            </form>
        </div>
    </div>
</div>
<script type="text/javascript" th:src="@{/js/yy.js}"></script>
<!-- 底部结束 -->
<script type="text/javascript">
    (function ($) {
        var index_function = function () {
            var self = this;
            this.body = $(document.body);
            this.keydown_flag = false;
            this.body.delegate(".btn_closing", "click", function () {
                self.login();
            });

            // 回车事件绑定处
            $("input").keydown(function (e) {
                if (e.keyCode == 13) {
                    setTimeout(function () {
                        self.login();
                    }, 10);
                }
            });
            // this.test();
        };
        index_function.prototype = {
            test: function () {
                var self = this;
                yy_init("ok");
            },
            login: function () {
                var self = this;
                var username = document.getElementById("username").innerHTML;
                var address = document.getElementById("user_address").innerHTML;
                var userPhone=document.getElementById("user_phone").innerHTML;
                var receiveName=document.getElementById("receive_name").innerHTML;
                if (!username) {
                    yy_init("用户名不能为空");
                    return;
                }
                if (!address) {
                    yy_init("地址不能为空");
                    return;
                }
                $.ajax({
                    url: "/addOrder",
                    type: "POST",
                    dataType: "json",
                    data: {"username": username, "address": address,"userPhone":userPhone,"receiveName":receiveName},
                    success: function (data) {
                        if (data.text == "success") {
                            yy_init("下单成功，等待发货");
                            var referer = document.referrer;
                            console.log(referer);
                            if (!referer) {
                                location.href = "/index/index";
                            } else {
                                location.href = referer;
                            }

                        } else {
                            yy_init(data.text);
                        }
                    },
                    error: function (data, status, e) {
                        console.log(e);
                    }
                });
            }
        },
            window['index_function'] = index_function;
    })(jQuery);
    $(function () {
        var index = new index_function();
    });
</script>



<div th:replace="/common/footer::onloadJs"></div>
<script type="text/javascript">
    (function ($) {
        var index_function = function () {
            var self = this;
            this.body = $(document.body);
            this.body.delegate(".bt-fukuan", "click", function () {
                self.payment($(this));
            });
            this.body.delegate(".bt-shouhuo","click",function () {
                self.takeDeliver($(this));
            })
        };
        index_function.prototype = {
            test: function () {
                yy_init("model");
            },
            payment:function (obj) {
                        var self = this;
                        var id=obj.attr("id")
                        $.ajax({
                            url:"/payment",
                            type:"GET",
                            dataType:"json",
                            data:{"id":id},
                            success:function (data) {
                                if(data.text == "ok"){
                                    yy_init("付款成功");
                                    location.href = "/myOrders";
                                }else{
                                    yy_init(data.text);
                                }
                            },
                    error:function (data, status, e) {
                        console.log(e);
                    }
                });
            },

            takeDeliver:function (obj) {
                var self = this;
                var id=obj.attr("id")
                $.ajax({
                    url:"/takeDeliver",
                    type:"GET",
                    dataType:"json",
                    data:{"id":id},
                    success:function (data) {
                        if(data.text == "ok"){
                            yy_init("付款成功");
                            location.href = "/myOrders";
                        }else{
                            yy_init(data.text);
                        }
                    },
                    error:function (data, status, e) {
                        console.log(e);
                    }
                });
            }
        },
        window['index_function'] = index_function;
    })(jQuery);
    $(function () {
        var index = new index_function();
    });
</script>
</body>
</html>